<template>
  <div class="fullScreen">
    <div class="img-box img-logo">
      <img class="img-max" :src="logo" alt="logo" />
    </div>
    <!-- prettier-ignore -->
    <form class="loginForm">
      <div class="row">
        <div class="input-box">
          <input type="text" v-model="form.name" placeholder="请输入账号" />
        </div>
      </div>
      <div class="row">
        <div class="input-box">
          <input type="password" v-model="form.password" placeholder="请输入密码" />
        </div>
      </div>
      <div class="row">
        <button class="btn btn-submit" type="button" @click="submit()" :disabled="isDisabled">
          登录
        </button>
      </div>
    </form>
    <!-- <pre>{{ objres }}</pre> -->
    <div class="test">{{ $version }}</div>
  </div>
</template>

<script>
import storage from '@/assets/storage.js';
import { findFirstValid } from '@/units/myfun.js';

export default {
  name: 'logo',
  data() {
    return {
      logo:
        'https://qiniuoss.chenxi618.com/C9CD67eb-15dC-9D8a-3615-a59cB63e2baB.png',
      cdcid: '',
      form: {
        name: '',
        password: '',
      },
      objres: null, //测试用
    };
  },
  computed: {
    isDisabled: function() {
      if (this.form.name == '') return true;
      if (this.form.password == '') return true;
      return false;
    },
  },
  methods: {
    setLogo: function(cdcid) {
      let cfg = window.logoConfig;
      if (this._.has(cfg, cdcid)) {
        this.logo = this._.get(cfg, '[' + cdcid + '].urlLogo');
      }
      let server_cofig = window.serverApi;

      if (this._.has(server_cofig, 'logo')) {
        this.logo = this._.get(server_cofig, 'logo');
      }
    },
    submit: function(user) {
      let unu = !this._.isUndefined(user);
      let params = {
        userName: unu ? user.userName : this.form.name,
        userPwd: unu ? user.userPwd : this.form.password,
        companyDepartmentCompanyId: this.cdcid == '' ? 0 : this.cdcid,
      };
      let data = {
        // userName: this.form.name,
        // userPwd: this.form.password,
      };
      storage.setLS('userName', params.userName);
      this.$api
        .用户身份验证并登陆(params, data)
        .then((res) => {
          // this.objres = res.data;
          if (res.code === 200 && res.data) {
            this.$store.commit('setUser', params);
            document.title = '';
            storage.setLS('userPwd', params.userPwd);
            this.$router.push({
              path: '/client',
              query: Object.assign(
                { ...this.$route.query },
                {
                  roomId: res.data.room_Id,
                }
              ),
            });
          } else {
            this.$toasted.show('抱歉，用户名或密码错误', {
              duration: 1000 * 2,
            });
            Promise.reject(401);
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {});
    },
  },
  mounted() {
    // if (process.env.NODE_ENV == 'development') {
    //   this.form.name = 'ww18901';
    //   this.form.password = '8901';
    // }
    let _ = this._;
    document.title = '登录';
    let cdcid = this._.get(this.$route.query, 'companyId', '');
    this.cdcid = cdcid;

    this.setLogo(cdcid);
    let userName = findFirstValid(
      (value) => {
        if (!_.isNull(value) && !_.isEmpty(_.trim(value))) {
          return value;
        }
      },
      _.get(this.$route.query, 'userName', ''),
      storage.getLS('userName')
    );
    let userPwd = findFirstValid(
      (value) => {
        if (!_.isNull(value) && !_.isEmpty(_.trim(value))) {
          return value;
        }
      },
      _.get(this.$route.query, 'userPwd', ''),
      storage.getLS('userPwd')
    );
    this.form.name = userName || '';
    this.form.password = userPwd || '';
    if (!(this._.isNull(userName) || this._.isNull(userPwd))) {
      this.submit();
    }
  },
};
</script>

<style scoped lang="less">
@import url('./../assets/config.less');
//  src="./login.less"
@FSW: 375/100;
.fullScreen {
  height: 100vh;
  &.mobile {
    @media screen and(min-width:1024px) {
      max-width: 640px;
    }
    margin: 0 auto;
  }
  // background: rgba(128, 128, 255, 0.4);

  &::before {
    content: '';
    display: block;
    height: unit((20 / @FSW), vw);
    @media screen and(min-width:1024px) {
      height: 20px;
    }
  }
}
.img-logo {
  position: relative;
  width: unit((72 / @FSW), vw);
  height: unit((72 / @FSW), vw);
  margin: unit((65 / @FSW), vw) auto unit((40 / @FSW), vw) auto;
  border-radius: 8px;
  @media screen and(min-width:1024px) {
    width: 72px;
    height: 72px;
    margin: 65px auto 40px auto;
  }
}
.loginForm {
  margin-left: unit((20 / @FSW), vw);
  margin-right: unit((20 / @FSW), vw);
  @media screen and(min-width:1024px) {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .row {
    position: relative;
    margin-bottom: unit((10 / @FSW), vw);
    @media screen and(min-width:1024px) {
      margin-bottom: 10px;
    }
    .input-box {
      display: block;
      padding: unit((16 / @FSW), vw);
      border-radius: 4px;
      background-color: #f2f2f2;
      @media screen and(min-width:1024px) {
        padding: 16px;
      }
      input {
        display: block;
        font-size: unit((16 / @FSW), vw);
        line-height: 1.5;
        width: 100%;
        border: none;
        background: none;
        @media screen and(min-width:1024px) {
          font-size: 16px;
        }
      }
    }
  }
}
.btn-submit {
  display: block;
  font-size: unit((16 / @FSW), vw);
  line-height: unit((54 / @FSW), vw);
  width: 100%;
  margin-top: unit((50 / @FSW), vw);
  border-radius: 4px;
  background-color: #94bfff;
  color: #fff;
  @media screen and(min-width:1024px) {
    font-size: 16px;
    line-height: 54px;
    margin-top: 50px;
  }
}
.test {
  font-size: 2vw;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(0deg, #f8e7ce, transparent);
  @media screen and(min-width:1024px) {
    font-size: 12px;
  }
}
</style>
